<template>
    <div class="page">
      <div class="content">
        <div class="pageClose">
          <div @click="router.back()">关闭</div>
        </div>
        <div class="pageForm">
          <div class="formTitle">出品汇总打印</div>

          <div class="dateBox">
            <div class="formName">时间选择：</div>
            <div class="datePicker">
              <el-date-picker v-model="operDate" type="datetimerange" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable style="width: 100%;background-color: #FAFAFA; padding: 20px;"/>
            </div>
          </div>

          <div class="fromTypeBox">
            <div class="formName">出品点：</div>
            <div class="fromTypeItem" @click="choseAllFun()">
              <div class="ridio" :class="{ridioT: choseAll == true}">
                <div></div>
              </div>
              <div>全选</div>
            </div>
          </div>

          <div class="fromTypeBox">
            <div class="formName"></div>
            <div style="display: flex; flex-wrap: wrap;">
              <div class="fromTypeItem" v-for="(item,index) in typeList" :key="index" style="margin-bottom: 20px;" @click="typeStateFun(index)">
                <div class="ridio" :class="{ridioT: item.state == true}">
                  <div></div>
                </div>
                <div>{{ item.Name }}</div>
              </div>
            </div>
          </div>

          <div class="btnS">
            <div class="cancel" @click="router.back()">取消</div>
            <div class="print" @click="Print()">打印</div>
          </div>
        </div>
      </div>
    </div>
</template>
  
<script setup> 
  import Api from '@/api'
  import { transformWorkTime } from '@/utils/chenhao.js' 
  import useConfigStore from '@/store/config'  
  const configStore = useConfigStore() 
  const orgStartTime = configStore.shopInfo.orgReportStartTime
  const orgEndTime = configStore.shopInfo.orgReportEndTime
  
  const router = useRouter()
  const operDate = ref('')
  const choseAll = ref(false)
  const choseAllFun = () => {
    choseAll.value = !choseAll.value
    if(choseAll.value){
      typeList.value.map(e => {
        e.state = true
      })
    }else{
      typeList.value.map(e => {
        e.state = false
      })
    }
  }
  const typeStateFun = (index) => {
    typeList.value[index].state = !typeList.value[index].state
    let allState = true
    typeList.value.map(e => {
      if(e.state == false){
        allState = false
      }
    })
    if(allState){
      choseAll.value = true
    }else{choseAll.value = false}
  }

  const Print = () => {
    let contentData = {
      Data: []
    }
    typeList.value.map(e => {
      if(e.state == true){
        let data = {
          producePointCode: e.Code,
          producePointName: e.Name
        }
        contentData.Data.push(data)
      }
    })
    contentData.StartDate = operDate.value[0]
    contentData.EndDate = operDate.value[1]
    console.log(contentData)
    // return
    Api.Common.PcObjProcess.Do({ functionName: "OrderSummaryReceiptPrint", contentData })
    .then(res => {
        console.log(res)
        ElNotification({title: '提示',message: "打印成功", type: 'success'});
    })
  }

  const typeList = ref('')
  const getPrintSetList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "getPrintSetList", "contentData": {} })
        .then(res => {
            res.Points.map(e => {
              e.state = false
            })
            typeList.value = res.Points;
            console.log(typeList.value)
        })
    }

    onMounted(()=> {   
      operDate.value = transformWorkTime('今天', orgStartTime, orgEndTime)
    }) 
    
    getPrintSetList()
</script>
  
  <style scoped lang="scss">
  @import '@/styles/com_style_input.css';
    .page{
      min-height: 100vh;
      background-color: #F2F2F2;
      color: #212121;
    }
    .content{
      width: 80%;
      margin: auto;
      .pageClose{
        display: flex;
        justify-content: flex-end;
        padding: 20px 0;
        div{
          width: 100px;
          text-align: center;
          background-color: #CCCCCC;
          font-size: 18px;
          padding: 12px 0;
          border-radius: 8px;
          cursor: pointer;
        }
      }
      .pageForm{
        width: 70%;
        min-height: 720px;
        margin: auto;
        background-color: #fff;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        .formTitle{
          font-size: 20px;
          font-weight: bold;
          padding-bottom: 20px;
          border-bottom: 1px solid #E6E6E6;
        }
        .fromTypeBox{
          display: flex;
          align-items: center;
          font-size: 16px;
          margin-top: 30px;
          .fromTypeItem{
            display: flex;
            align-items: center;
            margin-right: 50px;
            cursor: pointer;
            .ridio{
              width: 20px;
              height: 20px;
              margin-right: 10px;
              background: url('https://oss.jtmckj.com/pc/images/order/write_border.png') no-repeat;
              background-size: 100% 100%;
            }
            .ridioT{
              position: relative;
              border-color: #FF6A00;
              display: flex;
              align-items: center;
              justify-content: center;
              background: url('https://oss.jtmckj.com/pc/images/order/orge_avtive.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .dateBox{
          display: flex;
          align-items: center;
          font-size: 16px;
          margin-top: 30px;
          .datePicker{
            width: 400px;
          }
        }

        .btnS{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          position: absolute;
          bottom: 30px;
          right: 30px;
          div{
            font-size: 24px;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #FF6A00;
            margin-left: 35px;
            cursor: pointer;
          }
          .cancel{
            color: #FF6A00;
          }
          .print{
            background-color: #FF6A00;
            color: #fff;
          }
        }
      }

      
    }
    .formName{
      width: 100px;
      text-align: right;
    }
  </style>
  